<template>
	<view class="page-container">
		<!-- 自定义导航栏 -->
		<custom-app-nav title="首页" />

		<!-- 主体内容区域 -->
		<view :style="{ height: bodyHeight }" class="main-content">
			<scroll-view scroll-y="true" class="scroll-container">
				<!-- 搜索栏 -->
				<view class="search-section">
					<view class="search-box">
						<text class="search-icon">🔍</text>
						<text class="search-placeholder">搜索目的地、酒店、景点...</text>
					</view>
				</view>

				<!-- 轮播横幅 -->
				<view class="banner-section">
					<swiper
						class="banner-swiper"
						indicator-dots="true"
						autoplay="true"
						interval="3000"
					>
						<swiper-item v-for="(banner, index) in bannerList" :key="index">
							<view
								class="banner-item"
								:style="{
									background: `linear-gradient(45deg, ${banner.color1}, ${banner.color2})`
								}"
							>
								<view class="banner-content">
									<view class="banner-icon">{{ banner.icon }}</view>
									<view class="banner-title">{{ banner.title }}</view>
									<view class="banner-subtitle">{{ banner.subtitle }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 旅游分类 -->
				<view class="category-section">
					<view class="category-grid">
						<view
							v-for="(category, index) in categoryList"
							:key="index"
							class="category-item"
						>
							<view class="category-content">
								<view class="category-icon">{{ category.icon }}</view>
								<view class="category-name">{{ category.name }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 优惠活动 -->
				<view class="promotion-section">
					<view class="section-title">💰 限时优惠</view>
					<view class="promotion-card">
						<view class="promotion-content">
							<view class="promotion-left">
								<view class="promotion-title">春游特惠</view>
								<view class="promotion-desc">全场酒店 8 折起</view>
							</view>
							<view class="promotion-btn">
								<text class="btn-text">立即抢购</text>
							</view>
						</view>
						<view class="promotion-bg-icon">🎫</view>
					</view>
				</view>

				<!-- 推荐路线 -->
				<view class="routes-section">
					<view class="section-title">🗺️ 精选路线</view>
					<view class="routes-list">
						<view
							v-for="(route, index) in recommendRoutes"
							:key="index"
							class="route-item"
						>
							<image :src="route.image" class="route-image" mode="aspectFill" />
							<view class="route-info">
								<view class="route-title">{{ route.title }}</view>
								<view class="route-duration">{{ route.duration }}</view>
								<view class="route-footer">
									<view class="route-price">¥{{ route.price }}</view>
									<view class="route-rating">
										<text class="rating-star">⭐</text>
										<text class="rating-text">{{ route.rating }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { useBodyHeight } from "@/utils/useStyle"

const bodyHeight = useBodyHeight()

// 轮播横幅数据
const bannerList = [
	{
		icon: "🏝️",
		title: "三亚海南",
		subtitle: "椰风海韵，度假天堂",
		color1: "#4facfe",
		color2: "#00f2fe"
	},
	{
		icon: "🏔️",
		title: "西藏拉萨",
		subtitle: "雪域高原，心灵净土",
		color1: "#43e97b",
		color2: "#38f9d7"
	},
	{
		icon: "🌸",
		title: "日本京都",
		subtitle: "樱花盛开，古韵悠然",
		color1: "#fa709a",
		color2: "#fee140"
	}
]

// 旅游分类数据
const categoryList = [
	{ icon: "🏨", name: "酒店", type: "hotel" },
	{ icon: "✈️", name: "机票", type: "flight" },
	{ icon: "🎫", name: "门票", type: "ticket" },
	{ icon: "🚗", name: "租车", type: "car" }
]

// 推荐路线数据
const recommendRoutes = [
	{
		id: 1,
		title: "云南大理-丽江-香格里拉 6 日游",
		duration: "6天5晚",
		price: "2899",
		rating: "4.8",
		image: "https://picsum.photos/120/120?random=5"
	},
	{
		id: 2,
		title: "九寨沟-黄龙-成都 5 日游",
		duration: "5天4晚",
		price: "3199",
		rating: "4.9",
		image: "https://picsum.photos/120/120?random=6"
	},
	{
		id: 3,
		title: "西安-华山-兵马俑 4 日游",
		duration: "4天3晚",
		price: "1899",
		rating: "4.7",
		image: "https://picsum.photos/120/120?random=7"
	}
]
</script>

<style lang="scss" scoped>
// 页面容器
.page-container {
	background-color: #ffffff;
}

// 导航栏
.nav-header {
	background-color: #ffffff;
	position: relative;
}

.status-bar {
	background-color: #ffffff;
}

.title-bar {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 30rpx;
	position: relative;
}

.title-left,
.title-right {
	display: flex;
	align-items: center;
}

.app-title {
	color: #333333;
	font-size: 36rpx;
}

.location-text {
	color: #666666;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.notification-icon {
	color: #666666;
	font-size: 32rpx;
}

// 主体内容
.main-content {
	background-color: #ffffff;
}

.scroll-container {
	height: 100%;
	overflow: auto;
}

// 搜索栏
.search-section {
	background-color: #ffffff;
	padding: 0 30rpx 20rpx;
	margin-top: 20rpx;
}

.search-box {
	background-color: #ffffff;
	border: 4rpx solid #eeeeee;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
}

.search-icon {
	color: #666666;
	font-size: 32rpx;
	margin-right: 20rpx;
}

.search-placeholder {
	color: #666666;
	font-size: 28rpx;
}

// 轮播横幅
.banner-section {
	padding: 0 30rpx;
	margin-bottom: 30rpx;
}

.banner-swiper {
	height: 300rpx;
	border-radius: 20rpx;
}

.banner-item {
	height: 300rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 48rpx;
	position: relative;
}

.banner-content {
	text-align: center;
}

.banner-icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.banner-title {
	font-size: 32rpx;
}

.banner-subtitle {
	font-size: 24rpx;
	margin-top: 10rpx;
}

// 旅游分类
.category-section {
	padding: 0 30rpx;
	margin-bottom: 40rpx;
}

.category-grid {
	display: flex;
	justify-content: space-between;
}

.category-item {
	width: 160rpx;
	height: 160rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid #eeeeee;
}

.category-content {
	text-align: center;
}

.category-icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.category-name {
	color: #333333;
	font-size: 24rpx;
}

// 优惠活动
.promotion-section {
	padding: 0 30rpx;
	margin-bottom: 40rpx;
}

.section-title {
	color: #333333;
	font-size: 32rpx;
	margin-bottom: 20rpx;
}

.promotion-card {
	background-color: #ff9500;
	border-radius: 20rpx;
	padding: 30rpx;
	position: relative;
	overflow: hidden;
}

.promotion-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.promotion-title {
	color: #ffffff;
	font-size: 36rpx;
	margin-bottom: 10rpx;
}

.promotion-desc {
	color: #ffffff;
	font-size: 24rpx;
}

.promotion-btn {
	background-color: #ffffff;
	border-radius: 50rpx;
	padding: 0 20rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}

.btn-text {
	color: #ff9500;
	font-size: 24rpx;
}

.promotion-bg-icon {
	position: absolute;
	color: #ffffff;
	right: -50rpx;
	top: -50rpx;
	font-size: 200rpx;
	opacity: 0.2;
}

// 推荐路线
.routes-section {
	padding: 0 30rpx;
	margin-bottom: 40rpx;
}

.route-item {
	background-color: #ffffff;
	border: 4rpx solid #eeeeee;
	border-radius: 16rpx;
	padding: 20rpx;
	display: flex;
	margin-bottom: 20rpx;
}

.route-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}

.route-info {
	flex: 1;
}

.route-title {
	color: #333333;
	font-size: 28rpx;
	margin-bottom: 10rpx;
}

.route-duration {
	color: #666666;
	font-size: 22rpx;
	margin-bottom: 10rpx;
}

.route-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.route-price {
	color: #ff3333;
	font-size: 32rpx;
}

.route-rating {
	display: flex;
	align-items: center;
}

.rating-star {
	color: #ff9500;
	font-size: 20rpx;
}

.rating-text {
	color: #666666;
	font-size: 20rpx;
	margin-left: 5rpx;
}
</style>
